{% load i18n %}
{% load base_tags %}
{% load markdownify %}

{% if custom_theme.welcome_theme == 'JUMBOTRON_BG' or not slides %}
{% if custom_theme.jumbotron_bg and custom_theme.jumbotron_bg.url %}
    <style>
        #gn-hero {
            background-image: url('{{ custom_theme.jumbotron_bg.url }}');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-color: rgb(156, 156, 156);
            background-blend-mode: multiply;
        }
    </style>
{% endif %}
{% block extra_style %}
{% endblock %}
<div id="gn-hero" class="gn-hero">
    <div class="jumbotron">
        <div class="gn-hero-description">
            {% if not custom_theme.jumbotron_welcome_hide %}
                {% with jumbotron_welcome_title=custom_theme.jumbotron_welcome_title|default:"GeoNode"|template_trans %}
                <h1>{% trans jumbotron_welcome_title %}</h1>
                {% endwith %}
                {% with jumbotron_welcome_content=custom_theme.jumbotron_welcome_content|default:"sharing geospatial data and maps."|template_trans %}
                <p>{% trans jumbotron_welcome_content %}</p>
                {% endwith %}
            {% endif %}
        </div>
        <p class="gn-hero-tools">
        </p>
    </div>
</div>
{% else %}
<div class="gn-hero">
    <div class="jumbotron gn-carousel">
        <div id="gn-hero-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            {% if slides.count > 1%}
            <ol class="carousel-indicators">
                {% for slide in slides %}
                <li data-target="#gn-hero-carousel" data-slide-to="{{ forloop.counter | add:'-1' }}"
                    class="{% if forloop.counter == 1 %}active{%endif%}"></li>
                {% endfor %}
            </ol>
            {% endif %}

            {% if not custom_theme.jumbotron_welcome_hide %}
                {% with jumbotron_welcome_title=custom_theme.jumbotron_welcome_title|default:"GeoNode"|template_trans %}
                <h1 class="carousel-header">{% trans jumbotron_welcome_title %}</h1>
                {% endwith %}
            {% endif %}
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {% for slide in slides %}
                <div class="item {% if forloop.counter == 1 %}active{%endif%}">
                    {% if slide.jumbotron_slide_image %}
                    <img src="{{ slide.jumbotron_slide_image_thumbnail.url }}" alt="{{ slide.slide_name }}">
                    {% endif %}
                    {% if not slide.hide_jumbotron_slide_content %}
                    <div class="carousel-caption">
                        {% with jumbotron_slide_content=slide.jumbotron_slide_content|markdownify %}
                        {% trans jumbotron_slide_content %}
                        {% endwith %}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            <!-- Left and right controls -->
            {% if slides.count > 1%}
            <a class="left carousel-control" href="#gn-hero-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#gn-hero-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}
